<template>
    <div>
        <div class="Header">
            <p class="HeaderP">所有仓库不支持删除只能废弃</p>
            <div class="bth">
                <a-button text @click="AddStash">添加新仓库</a-button>

            </div>
        </div>
        <div v-if="dataSource.length > 0">
            <a-table :dataSource="dataSource" :pagination="false" bordered>
                <a-table-column key="stashId" title="仓库id" data-index="stashId" />
                <a-table-column key="stashName" title="仓库名称" data-index="stashName" />
                <a-table-column key="stashTotalCapacity" title="仓库总容量（理论面积）" data-index="stashTotalCapacity" />
                <a-table-column key="stashCapacity" title="仓库以使用容量" data-index="stashCapacity" />
                <a-table-column title="操作">
                    <template #default="{ record }">
                        <a-button type="text" @click="UpdateStash(record)">修改</a-button>
                    </template>
                </a-table-column>
            </a-table>

        </div>
        <div v-else>
            <a-empty description="暂无数据">
            </a-empty>
        </div>

        <!-- 弹窗 -->
        <div>
            <div class="AddStash">
                <a-modal v-model:visible="visible" cancelText="取消" okText="提交" :title="Title" @cancel="cancelEdit"
                    @ok="OKEdit">
                    <div class="EditBox">
                        <a-form :model="AddStashList" :rules="rules" ref="AddStashRef">
                            <a-form-item label="仓库名称" name="stashName">
                                <a-input v-model:value="AddStashList.stashName" placeholder="请输入仓库名称" />
                            </a-form-item>
                            <a-form-item label="仓库容量" name="stashTotalCapacity">
                                <a-input v-model:value="AddStashList.stashTotalCapacity" placeholder="请输入仓库容量" />
                            </a-form-item>
                        </a-form>
                    </div>
                </a-modal>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { StashSelectAll, StashAdd, stashUpdateInformation } from "../../Axios/Admin";
import { message } from "ant-design-vue";
import { area } from "../../utils/unit";

let dataSource = ref([{
    stashId: 0,
    stashName: "",
    stashTotalCapacity: "",
    stashCapacity: "",
}])
let ListDate = ref([{
    stashId: 0,
    stashName: "",
    stashTotalCapacity: 0,
    stashCapacity: 0,
}])
let visible = ref(false)
let AddStashRef = ref()
let Title = ref("")
let Flag = ref(false)

let AddStashList = ref({
    stashName: "",
    stashTotalCapacity: "",
    stashId: 0
})

const rules = {
    stashName: [{ required: true, message: "请填写内容", trigger: "blur" },
    { pattern: /^[\u4E00-\u9FA5A-Za-z]+$/, message: "不能包含数字和特殊字符", trigger: "blur" }],
    stashTotalCapacity: [{ required: true, message: "请填写内容", trigger: "blur" },
    { pattern: /^([1-9][0-9]*)+(\.[0-9]{1,2})?$/, message: "不能包含负数，小数不超过两位", trigger: "blur" }]
}

onMounted(async () => {
    await init()
})

const AddStash = () => {
    visible.value = true
    Flag.value = false
    Title.value = "添加仓库信息"

    AddStashList.value = {
        stashName: "",
        stashTotalCapacity: "",
        stashId: 0
    }
}

const OKEdit = async () => {
    AddStashRef.value.validate().then(async () => {
        if (Flag.value) {
            const res1 = await stashUpdateInformation(AddStashList)
            if (res1) {
                if (res1.code === 200) {
                    message.success(res1.message)
                    await init()
                    visible.value = false
                    AddStashList.value = {
                        stashName: "",
                        stashTotalCapacity: "",
                        stashId: 0
                    }
                } else {
                    message.warn(res1.message)
                }
            }
        } else {
            const res = await StashAdd(AddStashList)
            if (res) {
                if (res.code === 200) {
                    message.success(res.message)
                    await init()
                    visible.value = false
                    AddStashList.value = {
                        stashName: "",
                        stashTotalCapacity: "",
                        stashId: 0
                    }
                } else {
                    message.warn(res.message)
                }
            }

        }

    })


}
const cancelEdit = () => {
    visible.value = false
    AddStashList.value = {
        stashName: "",
        stashTotalCapacity: "",
        stashId: 0
    }
}
const UpdateStash = (List) => {
    Flag.value = true
    const f = ListDate.value.filter(el => { return el.stashId === List.stashId })

    visible.value = true

    Title.value = "修改仓库信息"
    AddStashList.value.stashName = f[0].stashName
    AddStashList.value.stashTotalCapacity = f[0].stashTotalCapacity + ""
    AddStashList.value.stashId = f[0].stashId
}

const init = async () => {
    const res = await StashSelectAll()
    if (res && res.code == 200) {
        if (res.data) {
            ListDate.value = res.data
            dataSource.value = res.data

            for (let index = 0; index < ListDate.value.length; index++) {
                // const element = array[index];
                dataSource.value[index].stashId = dataSource.value[index].stashId
                dataSource.value[index].stashName = dataSource.value[index].stashName
                dataSource.value[index].stashTotalCapacity = area(ListDate.value[index].stashTotalCapacity)
                dataSource.value[index].stashCapacity = area(ListDate.value[index].stashCapacity)
            }

        }


    }
}
</script>

<style lang="scss" scoped>
.Header {
    margin-bottom: 40px;

    .HeaderP {
        width: 50%;
        display: inline-block;
        text-align: left;
        margin-top: 4px;
        color: red;
        font-size: 12px;
        font-size: 22px;
    }

    .bth {
        width: 50%;
        display: inline-block;
        text-align: right;
    }


}


.EditBox {
    .EditBoxP {

        .EditBoxPSpan {
            color: red;
        }
    }
}
</style>